.m-mask {
  z-index: 1000;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
  visibility: visible;
  background: var(--color-mask, rgba(0, 0, 0, 0.55));
  transition: all 0.25s ease-in-out;

  &.is-hidden {
    opacity: 0;
    visibility: hidden;
  }
}

.m-modal-wrap {
  z-index: 1001;
  position: fixed;
  left: 50%;
  top: 50%;
  visibility: visible;
  transform: translate3d(-50%, -50%, 0);

  &.is-hidden {
    visibility: hidden;
  }

  .m-modal {
    z-index: 9;
    position: relative;
    width: 540rpx;
    transform: scale(.9);
    opacity: 0;
    transition: transform 0.2s ease-in-out, opacity .2s ease-in-out;

    &.is-show {
      opacity: 1;
      transform: scale(1);
    }

    .m-modal__content {
      position: relative;
      padding-top: 30rpx;
      height: 100%;
      border: 0;
      border-radius: 3rpx;
      text-align: center;
      background-color: #fff;
      background-clip: padding-box;
      overflow: hidden;
    }

    .m-modal__title {
      margin: 0;
      padding: 12rpx 30rpx 24rpx;
      font-size: 36rpx;
      line-height: 1;
      color: #1c2438;
      text-align: center;
    }

    .m-modal__body {
      max-height: 300rpx;
      margin-bottom: 30rpx;
      padding: 20rpx 40rpx;
      font-size: 28rpx;
      color: #80848f;
      line-height: 1.5;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }

    .m-modal__btn-group {
      position: relative;
      display: flex;

      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 1px;
        transform: scaleY(0.5);
        background: #ddd;
      }

      .m-modal__btn {
        position: relative;
        flex: 1;

        &.m-modal__btn--cancel::after {
          content: '';
          position: absolute;
          top: 0;
          right: 0;
          width: 1px;
          height: 100%;
          transform: scaleX(0.5);
          background: #ddd;
        }
      }
    }
  }
}